<template>
  <div class="block user_add">
    <div class="block-title">
      <div class="block-options pull-right">
      </div>
      <h2>管理员添加</h2>
    </div>
    <form action="" method="post" class="form-horizontal form-bordered">
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-name">账号</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.name"
                 id="example-input-name" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写账号..." @input="$v.Info.name.$touch();">
          <span v-if="!$v.Info.name.required &&  Info.name!=''">请填账号</span>
          <span v-if="!$v.Info.name.minLength && Info.name!=''">抱歉账号必须6位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-nickname">昵称</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.nickname"
                 id="example-input-nickname" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写昵称..." @input="$v.Info.nickname.$touch();">
          <span v-if="!$v.Info.nickname.required &&  Info.nickname!=''">请填昵称</span>
          <span v-if="!$v.Info.nickname.minLength && Info.nickname!=''">抱歉昵称必须6位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-email">邮箱</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.email"
                 id="example-input-email" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写邮箱..." @input="$v.Info.email.$touch();">
          <span v-if="!$v.Info.email.required &&  Info.email!=''">请填邮箱</span>
          <span v-if="!$v.Info.email.minLength && Info.email!=''">抱歉邮箱必须6位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-password">登录密码</label>
        <div class="col-sm-4">
          <input type="password" v-model.trim="Info.password"
                 id="example-input-password" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写登录密码..." @input="$v.Info.password.$touch();">
          <span v-if="!$v.Info.password.required &&  Info.password!=''">请填登录密码</span>
          <span v-if="!$v.Info.password.minLength && Info.password!=''">抱歉登录密码必须6位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label"
               for="example-textarea-input">描述</label>

        <div class="col-md-4">
                    <textarea id="example-textarea-input" v-model.trim="Info.intro"
                              name="example-textarea-input" rows="7" class="form-control"
                              placeholder="请填写描述..." @input="$v.Info.intro.$touch();"></textarea>
          <span v-if="!$v.Info.intro.required && Info.intro!=''">请填描述</span>
          <span v-if="!$v.Info.intro.minLength && Info.intro!=''">抱歉描述必须6位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">是否禁用</label>
        <div class="col-md-9">
          <label class="radio-inline" for="example-inline-radio1">
            <input type="radio"
                   id="example-inline-radio1" v-model="Info.status"
                   value="1" name="example-inline-radios">启用                    </label>
          <label class="radio-inline" for="example-inline-radio2">
            <input type="radio"
                   id="example-inline-radio2" v-model="Info.status"
                   value="0" name="example-inline-radios">禁用                    </label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">爱好</label>

        <div class="col-md-9">
          <label class="checkbox-inline" for="example-inline-checkbox1">
            <input type="checkbox" id="example-inline-checkbox1"
                   name="example-inline-checkbox1" v-model="Info.hobby"
                   value="1"> 篮球                    </label>
          <label class="checkbox-inline" for="example-inline-checkbox2">
            <input type="checkbox" id="example-inline-checkbox2"
                   name="example-inline-checkbox1" v-model="Info.hobby"
                   value="2"> 足球                    </label>
        </div>
      </div>
      <div class="form-group">
        <label for="select_group" class="col-md-3 control-label">所属组</label>
        <div class="col-md-4">
          <select class="form-control" id="select_group" v-model="Info.group">
            <option value="">请选择所属组</option>
            <option value="1">经理组</option>
            <option value="2">员工组</option>
            <option value="3">编辑组</option>
            <option value="4">草泥马组</option>
          </select>
        </div>
      </div>
      <div class="form-group form-actions">
        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-effect-ripple btn-primary" @click="add_data($v.Info)">
            添加管理员
          </button>
        </div>
      </div>
    </form>
    <jelly-from>
      <form  slot="form" :class="'yes'" action="" method="POST" role="form">
      	<legend>Form Title</legend>

      	<div class="form-group">
      		<label for=""></label>
      		<input type="text" class="form-control" name="" id="" placeholder="Input...">
      	</div>



      	<button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </jelly-from>
    <transition name="loading" mode="out-in">
      <loading v-if="loadAt"></loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import {mapState, mapMutations} from 'vuex'
  import {required, minLength, between, email} from 'vuelidate/lib/validators'
  import loading    from '../../components/comment/loading/loading';
  import jellyFrom   from '../../components/comment/jellyFrom/from';
  const ERROR_STATUS = 1001;
  export default{
    name: "user_add",
    data(){
      return {
        Info: {
          name: '', nickname: '', email: '', password: '', intro: '', hobby: [], group: '',
        }
      }
    }, created(){
      let fromConfig = {};
      fromConfig.title='hello vue js';
      fromConfig.area =['40%','50%'];
      fromConfig.btn   ={confirm:'销毁',close:'不销毁'};
      fromConfig.params={hello:22222};
      fromConfig.yes=function(index,param){
        let form      =   document.querySelector('.yes');
        console.log(param);
      };
      fromConfig.no=function(index,param){
          console.log(param);
      };
      this.set_fromAt(fromConfig)
    },
    validations: {
      Info: {
        name: {required, minLength: minLength(6)},
        nickname: {required, minLength: minLength(6)},
        email: {required, minLength: minLength(6)},
        password: {required, minLength: minLength(6)},
        intro: {required, minLength: minLength(6)},
        status: {required, minLength: minLength(6)},
        hobby: {required, minLength: minLength(6)},
        group: {required, minLength: minLength(6)},
      }
    }, computed: {
      ...mapState({
        loadAt: 'loading'
      })
    }, methods: {
      ...mapMutations({
        set_loadAt: 'set_loading',
        set_fromAt: 'jellyFrom',
      }),
      add_data(validate){
        validate.$touch(); //  打开全部验证
        if (validate.$error) {
          return false
        }
        ;  //这里验证成功是false 如果失败就是true
        this.set_loadAt({code: 100, meta: true});
        let data = {};
        data.name = this.Info.name;
        data.nickname = this.Info.nickname;
        data.email = this.Info.email;
        data.password = this.Info.password;
        data.intro = this.Info.intro;
        data.status = this.Info.status;
        data.hobby = this.Info.hobby;
        data.group = this.Info.group;          // 发送请求可以采用 es7 语法 async 加await 机制 做处理 利用fetch api
        // 发送请求需要验证后端生成uuid 加上过期时间  与lorck 配合使用 过期需重新登录验证 如有session_id 必须对session_id 进程验证 或者看看jwt 采取header头验证 严格采用rest风格
        this.apiPost(`/api/admin/user/save`, data).then((response) => {
          let response_data = response.data.list;
          let error_code = response_data.status;
          if (error_code !== ERROR_STATUS) {
            // 这里需要引入提示框，或者根据实际的需求在做处理
            this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
          }
        }).catch((response) => {
          // 如果失败了那么我们还是的对我们的错误进程处理错误机制处理待完善
          this.set_loadAt({code: 102, meta: false});
        });
      }
    }, mixins: [http],
    components: {loading, jellyFrom}
  }
</script>
<style type="stylus" scoped>
  .loading-enter-active, .loading-leave-active {
    transition: all .4s;
  }

  .loading-enter, .loading-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
